
<!-- 一、Props:父传子 -->
 父组件 Parent.vue
<!--<template> <Child :message="parentMessage" /> </template>-->
<!--<script setup>-->
<!--import Child from './Child.vue';-->
<!--const parentMessage = 'Hello from Parent';-->
<!--</script>-->
 子组件 Child.vue
<!--<template> <div>{{ message }}</div> </template>-->
<!--<script setup>-->
<!--const props = defineProps({-->
<!--  message: String-->
<!--});-->
<!--</script>-->


<!-- 二、自定义事件emit:子传父 -->
emit第一个参数是自定义事件的名字，第二个参数是要传的值
子组件 Child.vue
<!--<template> <button @click="sendData">传递数据</button> </template>-->
<!--<script setup>-->
<!--const emit = defineEmits(['change']);-->
<!--const sendData = () => {
 emit('change', 'Hello from Child');-->
<!--};-->
<!--</script>-->
 父组件 Parent.vue
<!--<template> <Child @change="handleData" /> </template>-->
<!--<script setup>-->
<!--import Child from './Child.vue';-->
<!--const handleData = (data) => {-->
<!--  console.log('收到的消息：' + data); // 打印收到的消息为：Hello from Child-->
<!--};-->
<!--</script>-->

<!-- 三、v-model双向绑定：父传子 -->
 父组件 Parent.vue
<!--<template> <Child v-model="count" /> </template>-->
<!--<script setup>-->
<!--import Child from './Child.vue';-->
<!--const count=ref(0); -->
<!--</script>-->
 子组件 Child.vue
<!--<template> <input type="text" :value="modelValue" @input="updateMessage" /> </template>-->
<!--<script setup>-->
<!--const props = defineProps(['modelValue']);-->
<!--const emit = defineEmits(['update:modelValue']);-->
<!--const updateMessage = (value) => {-->
<!--  emit('update:modelValue', value);-->
<!--};-->
<!--</script>-->

<!-- 四、ref 模版引用：父直接访问子组件的模板 -->
 父组件 Parent.vue
<!--<template> <Child ref="childRef" /> </template>-->
<!--<button @click="callChildMethod">调用子组件方法</button>-->
<!--<script setup>-->
<!--import Child from './Child.vue';-->
<!--const childRef = ref(null);-->
<!--const callChildMethod = () => { childRef.value.childMethod(); };-->
<!--</script>-->
 子组件 Child.vue
<!--<template> <div>子组件模板</div> </template>-->
<!--<script setup>-->
<!--const childMethod = () => {-->
<!--  console.log('子组件方法被调用');-->
<!--};-->
<!--defineExpose({ childMethod }); // 子组件方法暴露给父组件-->
<!--</script>-->

五、Pinia状态管理：父子组件共享状态
<!--// stores/counter.js-->
<!--import { defineStore } from 'pinia';-->
<!--export const useCounterStore = defineStore('counter', {-->
<!--state: () => ({ count: 0 }),-->
<!--actions: {-->
<!--increment() {-->
<!--this.count++;-->
<!--}-->
<!--}-->
<!--});-->
<!--// 组件中使用-->
<!--import { useCounterStore } from './stores/counter';-->
<!--const store = useCounterStore();-->
<!--store.increment();-->

六、Event Bus：事件总线：父子组件通信
<!--// event-bus.js-->
<!--import mitt from 'mitt';-->
<!--export const emitter = mitt();-->
<!--// 组件A (发送事件)-->
<!--emitter.emit('custom-event', { data: 'payload' });-->
<!--// 组件B (接收事件)-->
<!--emitter.on('custom-event', (payload) => {-->
<!--console.log(payload.data);-->
<!--});-->


七、Provide/Inject（跨层级通信）
<!-- 祖先组件 Ancestor.vue -->
<!--<script setup>-->
<!--import { provide, ref } from 'vue';-->
<!--const sharedData = ref('全局数据');-->

<!--provide('sharedKey', sharedData);-->
<!--</script>-->
<!--&lt;!&ndash; 后代组件 Descendant.vue &ndash;&gt;-->
<!--<script setup>-->
<!--import { inject } from 'vue';-->
<!--const receivedData = inject('sharedKey');-->
<!--</script>-->

八、不同场景的选择建议
场景       	推荐方式	        注意事项
父子简单传值	Props/Events	  遵循单向数据流原则
跨层级通信	  Provide/Inject  避免滥用导致数据流混乱
复杂状态管理	Pinia	          适合中大型项目
快速原型开发	事件总线	        适合小型项目临时方案